<template>
  <div class="mark-box">
    <h2>积分商城</h2>
    <div class="bigbox"> 
        <a href=""><img src="../../assets/index-img/mark1.jpg" alt="" /></a>
        <a href=""><img src="../../assets/index-img/mark2.jpg" alt="" /></a>
    </div>
    <ul class="jifen">
        <li>
            <img src="../../assets/index-img/mark3.jpg" alt="">
            <i>格沵(GERM)背挎暖暖熊 潮...</i>
            <span>500积分+¥179</span>
        </li>
        <li>
            <img src="../../assets/index-img/mark4.jpg" alt="">
            <i>one2ten哆啦A梦 公仔柔光...</i>
            <span>500积分+¥95</span>
        </li>
        <li>
            <img src="../../assets/index-img/mark5.jpg" alt="">
            <i>黄小厨 肆月系列抗菌不粘锅...</i>
            <span>500积分+¥199</span>
        </li>
        <li>
            <img src="../../assets/index-img/mark6.jpg" alt="">
            <i>大宇(DAEOO)全自动多...</i>
            <span>500积分+¥279</span>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mark",
  data() {
    return {};
  },
};
</script>
<style>
body {
  padding: 0;
  margin: 0;
}
* {
  padding: 0;
  margin: 0;
}
a {
  display: block;
  height: auto;
  line-height: 0;
}
.mark-box {
  width: 100%;
  height: auto;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
h2{
    font-size: .22rem;
    line-height: .55rem;
    margin-left: .15rem;
}
.bigbox{
    width: 100%;
    margin-bottom: .01rem;
}
.bigbox>a{
    margin-bottom: .02rem;
}
.mark-box>ul{
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: .05rem;
    flex-wrap: wrap;
}
.jifen>li{
    width: 1.85rem;
    height: 2.45rem;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}
.jifen>li>img{
    width: 100%;
}
.jifen>li>i{
    font-size: .12rem;
    margin: 0 .1rem;

}
.jifen>li>span{
    font-size: .14rem;
    font-weight: 600;
    margin: 0 .1rem;
}
</style>
